<template>
  <scroll-view scroll-y @scrolltolower="handleTolow" class="question_wrap">
    <!-- toast -->
    <u-toast ref="uToast" :duration="1000" />
  <!--  :timestamp="list.limitTime" -->
    <view class="time_wrap">
      <u-count-down
        @end="handleEnd"
        :timestamp="10"
        :show-border="true"
        font-size="32"
        color="red"
        border-color="pink"
      ></u-count-down>
    </view>
    <view class="group_wrap">
      <view class="group_name">{{list.title}}</view>
      <view class="subject_item" v-for="(item,index) in list.subjectList" :key="index">
        <view class="sub_wrap">
          <view class="subject_type">[{{item.type}}]</view>
          <view class="subject_title">{{item.title}}</view>
          <view class="subject_grade">({{item.grade}}分)</view>
        </view>
        <!-- <view class="options_item" v-for="(item2,index2) in item.option" :key="index2"> -->
        <view class="option_item" v-if="item.type=='单选'">
          <view class="uni-list">
            <radio-group @change="radioChange">
              <label
                class="uni-list-cell uni-list-cell-pd"
                v-for="(item2, index2) in item.optionsList"
                :key="index2"
              >
                <view>
                  <radio
                    :value="item2.content"
                    @click="handleClick(item2,index)"
                    style="padding:8rpx 0;"
                  />
                  <text style="padding-left:10rpx">{{item2.code}}. {{item2.content}}</text>
                </view>
              </label>
            </radio-group>
          </view>
        </view>

        <view class="option_item" v-if="item.type=='判断'">
          <view class="uni-list">
            <radio-group @change="radioChange">
              <label
                class="uni-list-cell uni-list-cell-pd"
                v-for="(item2, index2) in item.optionsList"
                :key="index2"
              >
                <view>
                  <radio
                    :value="item2.content"
                    @click="handleClick(item2,index)"
                    style="padding:8rpx 0;"
                  />
                  <text style="padding-left:10rpx">{{item2.content}}</text>
                </view>
              </label>
            </radio-group>
          </view>
        </view>

        <view class="option_item" v-if="item.type=='多选'">
          <view class="uni-list">
            <checkbox-group @change="checkboxChange">
              <label
                class="uni-list-cell uni-list-cell-pd"
                v-for="item3 in item.option"
                :key="item3.content"
              >
                <view>
                  <checkbox :value="item3.content" style="padding:8rpx 0;" />
                  <text style="padding-left:10rpx">{{item3.content}}</text>
                </view>
              </label>
            </checkbox-group>
          </view>
        </view>
      </view>
    </view>

    <view class="btn_wrap">
      <button type="primary" @click="handleSubmit">提交</button>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      id: 0,
      answear: [],
      answears: [],
      records: [],
      test: [],
      current: 0,
      list: {
        id: 1,
        title: "题组12",
        content: "简介",
        subject: [
          {
            title: "答案是3",
            type: "单选",
            grade: 1,
            id: 1,
            option: [
              { id: 1, content: "选项1", status: 0, pId: 1, code: "A" },
              { id: 2, content: "选项2", status: 0, pId: 1, code: "B" },
              { id: 3, content: "选项3", status: 1, pId: 1, code: "C" },
              { id: 4, content: "选项4", status: 0, pId: 1, code: "D" }
            ]
          },
          // {
          //   title: "答案是2",
          //   type: "多选",
          //   grade: 1,
          //   id: 2,
          //   option: [
          //     { id: 4, content: "多选选项1", status: 0, pId: 2 },
          //     { id: 5, content: "多选选项2", status: 1, pId: 2 },
          //     { id: 6, content: "多选选项3", status: 1, pId: 2 },
          //     { id: 7, content: "多选选项4", status: 0, pId: 2 },
          //     { id: 8, content: "多选选项5", status: 0, pId: 2 }
          //   ]
          // },
          {
            title: "答案是2",
            type: "单选",
            grade: 2,
            id: 3,
            option: [
              { id: 91, content: "选项5", status: 0, pId: 3, code: "A" },
              { id: 10, content: "选项6", status: 1, pId: 3, code: "B" },
              { id: 11, content: "选项7", status: 0, pId: 3, code: "C" },
              { id: 12, content: "选项8", status: 0, pId: 3, code: "D" }
            ]
          },
          {
            title: "答案是true",
            type: "判断",
            grade: 2,
            id: 4,
            option: [
              { id: 21, content: "对", status: 0, pId: 4 },
              { id: 22, content: "错", status: 1, pId: 4 }
            ]
          }
        ]
      }
    };
  },
  onLoad(option) {
    console.log("lanch");
    console.log(option);
    this.id = option.id;
    this.getList();
  },
  methods: {
    handleTolow() {
      console.log("到底啦");
    },
    handleEnd() {
      console.log("时间用完,自动提交");  
      this.handleSubmit();
    },
    getList() {
      this.request({
        url: this.apiServer + "/group/findGroupById?id=" + this.id
      }).then(res => {
        this.list = res.data;
        console.log(this.list);
      });
    },
    /**
     * 绑定选择答案事件
     */
    radioChange: function(evt) {
      //console.log(evt);
      // this.answear.push(evt.target.value);
      // console.log(this.answear);
      //console.log("click");
      // for (let i = 0; i < this.list.length; i++) {
      //   console.log(this.list.subject[i].content);
      //   if (this.list[i].content === evt.target.value) {
      //     this.current = i;
      //     break;
      //   }
      // }
    },
    handleClick(item2, index) {
      //console.log(item2);
      //存答案
      this.answear[index] = item2;
      console.log(this.answear);
    },

    handleSubmit() {
      console.log("submit");
      console.log(this.answear);
      var questionStr;
      var answersStr;
      var recordStr;
      var total = 0;
      var count = 0;
      for (var i = 0; i < this.answear.length; i++) {
        if (this.answear[i] == null) {
          console.log("第" + (i + 1) + "题为空");
          continue;
        }
        //questions
        this.test[i] = this.answear[i].id;

        //answers
        this.answears[i] = this.answear[i].status;

        //record
        this.records[i] = this.answear[i].code;

        if (this.answear[i].status == 1) {
          console.log("答对了第" + (i + 1) + "题");
          total += this.list.subjectList[i].grade;
          count++;
          console.log("目前分数:" + total);
        } else {
          console.log("答错了第" + (i + 1) + "题");
          console.log("目前分数:" + total);
        }
      }

      console.log("----------------");
      console.log("答对" + count + "题");
      console.log("共" + total + "分");
      questionStr = this.test.join(",");
      answersStr = this.answears.join(",");
      recordStr = this.records.join(",");
      // var arr = questionStr.split(",");
      console.log("===============");
      console.log(questionStr);
      console.log(answersStr);
      console.log(recordStr);
      // console.log(arr);
      console.log("----------------");

      //提交
      this.request({
        url: this.apiServer + "/record/addRecord",
        method: "POST",
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        data: {
          questions: questionStr,
          answers: answersStr,
          records: recordStr,
          score: total,
          uId: uni.getStorageSync("user").id,
          pId: this.list.id
        }
      }).then(res => {
        console.log(res);
        if (res.code !== "500") {
          uni.navigateTo({
            url: `/pages/answer/index?id=${res.data}`
          });
        } else {
          this.$refs.uToast.show({
            title: res.msg + ",现在跳转至答案页面..",
            type: "error",
            url: `/pages/answer/index?id=${res.data}`
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.question_wrap {
  // height: calc(100vh - 100px);
  padding: 15rpx;
  .time_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10rpx 0;
  }

  .group_wrap {
    .group_name {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 40rpx;
      font-weight: 800rpx;
      padding-bottom: 10rpx;
      color: #000;
    }
    .sub_wrap {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 10rpx;
      padding-top: 10rpx;
      .subject_type {
        color: #000;
        font-size: 32rpx;
        font-weight: 700;
        padding-right: 10rpx;
      }
      .subject_title {
        color: #000;
        font-size: 30rpx;
      }
      .subject_grade {
        color: #ccc;
        font-size: 28rpx;
        padding-left: 10rpx;
      }
    }
  }
  .btn_wrap {
    padding: 20rpx 15rpx;
    justify-content: center;
    align-items: center;
  }
  .uni-list-cell {
    justify-content: flex-start;
  }
}
</style>